<template>
  <div :class="lcd_setter_class">
    <config-item :title="title + '大小'">
      <template #content>
        <size
          @size="handleSize"
          @update:width="handleWidth"
          :width.sync="width"
          @update:height="handleHeight"
          :height.sync="height"
        />
      </template>
    </config-item>
  </div>
</template>

<script>
import set from '@/mixins/setter.js'
import { lcd_engine_meta } from '@/lcd.engine';

import { KEY } from './constant';

export default {
  name: `lcd-setter-${KEY}`,
  mixins: [set],
  data() {
    return {
      width: lcd_engine_meta[KEY].attr.w,
      height: lcd_engine_meta[KEY].attr.h,
      form: {
        ...lcd_engine_meta[KEY].prop,
      }
    }
  },
  computed: {
    lcd_setter_class() {
      return `lcd-setter-${KEY}`
    }
  },
  watch: {
    restore: {
      handler(val, oldVal) {
        if (val) {
          if (!this.meta) {
            this.initialize()
          } else {
            this.replicate(this.meta)
          }
        }
      },
    },
  },
  methods: {
    initialize() {
      // attr
      this.width = lcd_engine_meta[KEY].attr.w
      this.height = lcd_engine_meta[KEY].attr.h
      this.handleWidth(this.width)
      this.handleHeight(this.height)
      // prop

      this.handleUpdateComponent({
        id: this.id,
        key: 'prop',
        value: this.form,
      })
    },
    replicate(config) {
      // attr
      this.width = config.attr.w
      this.height = config.attr.h
      this.handleWidth(this.width)
      this.handleHeight(this.height)
      // prop

      this.handleUpdateComponent({
        id: this.id,
        key: 'prop',
        value: this.form,
      })
    },
    main() {
      if (this.config.attr.w == lcd_engine_meta[KEY].attr.w && this.config.attr.h == lcd_engine_meta[KEY].attr.h) {
        this.initialize()
      } else {
        this.replicate(this.config)
      }
    },
  },
  mounted() {
    this.main()
  },
}
</script>
